<template> 
    <div class="relev">
        <div  class="head-tab">
            <zan-tab
            :scroll="false"
            :list="tabList"
            :selected-id="selectedId" 
            @tabchange="handleTabChange"
            />
        </div> 
        <div class="user-content " v-if="selectedId==1">
           
            <div v-if="TopicsList.length!=0">
                <state-user :item="item" v-for="(item,index) in  stateUserList" :key="index" @clearRelev="deleteUser"></state-user>
            </div>
            
            <div class="text-center data-null" v-else>暂无数据</div>
        </div>
        <div class="gambit-content" v-if="selectedId==2">
            <div v-if="TopicsList.length!=0">
                <state-msg :item="item.topic" v-for="(item,index) in  TopicsList" :key="index" @clearRelev="stateBtn" @jump="jumpState"    :relev="false"></state-msg>
            </div>
            
            <div class="text-center data-null" v-else>暂无数据</div>
        </div>
    </div> 
</template>

<script> 
import stateMsg from '@/components/tpl/state-msg' 
import stateUser from '@/components/tpl/state-user'
import * as api from '@/utils/api' 
export default {
    onLoad(){
        this.getStateList('user',1);
    },
    components: {
        stateMsg,
        stateUser
    }, 
    data () {
        return {
            selectedId: '1', 
            tabList:[{
                id: '1',
                title: '用户'
            },{
                id: '2',
                title: '话题'
            }],
            TopicsList:[],  //话题列表
            stateUserList:[],  //用户列表
        }
    },
    methods:{
        getStateList(w,type){
            let vm = this;
            let body={
                model: "Attentions",
                with:{
                    "0":w
                },
                limit:50,
                offset:0,
                orderBy:"create_time desc",
                condition: {
                    "uid":wx.getStorageSync('u_id'),
                    "type":type
                }
            };
            api.commonSite(body).then(res=>{
                if(res.data.code==200){
                    // vm.stateList=res.data.data.data;
                    if(vm.selectedId==1){
                        vm.stateUserList=res.data.data.data;   
                    }else{
                        vm.TopicsList=res.data.data.data;
                    }
                }
            });
        },
        handleTabChange(e) {  
            this.selectedId=e.mp.detail;
            if(this.selectedId==1){
                this.getStateList('user',1);
            }else{
                this.getStateList('topic',2);
            }
        },
        //删除用户 
        deleteUser(){
            let vm = this; 
            let body={
                model: "Attentions",
                data:{
                    uid:wx.getStorageSync('u_id'),
                    to_id:item.id,
                    type:'1'
                }
            };
            api.deleteData(body).then(res=>{
                if(res.data.code==200){
                    vm.getStateList('user',1);
                }
            }) 
        },
        //关注话题 删除话题
        stateBtn(item){
            let vm = this; 
            let body={
                model: "Attentions",
                data:{
                    uid:wx.getStorageSync('u_id'),
                    to_id:item.id,
                    type:'2'
                }
            };
            api.deleteData(body).then(res=>{
                if(res.data.code==200){
                    vm.getStateList('topic',2);
                }
            }) 
        },
        //跳转话题列表
        jumpState(item){
            let url = `./../topics/main?tId=${item.id}`;
            wx.navigateTo({url}) 
        },
    }, 
}

</script>
<style scoped lang="scss">
.relev{
    width:100%;
    padding-top:90rpx;
   .head-tab{
        position:fixed;
        top:0;
        width:100%;
        height:90rpx;
        background:#fff; 
        z-index:20;
    } 
    .user-content,.gambit-content{
        padding:20rpx;
        box-sizing:border-box;
    }
    .data-null{
        font-size:28rpx;
        color:#999;
    }
}
</style> 
